<template>
<div class="option-design">
  <div class="content">
    <el-input v-model="text" placeholder="选项" resize="both" @change="changeText"></el-input>
    <el-input v-model="description" placeholder="选项说明" resize="both" @change="changeDes"></el-input>
    <div>
      <el-checkbox :model-value="this.isOptAviSet" style="margin-top: 5px" @change="optSetChange">设定本选项作答名额</el-checkbox>
      <el-input-number
          :disabled="!this.isOptAviSet"
          v-model="this.optionAviNum"
          size="mini"
          @change="optNumChange"
          :min="1"
          label="描述文字"
          style="margin-top: 10px; margin-bottom: 10px">

      </el-input-number>
    </div>

  </div>
  <div class="actions">
    <div class="action">
      <el-checkbox class="isadmit" v-model="isDefault" @change="changeDefault">默认</el-checkbox>
    </div>
    <div class="action">
      <insert-option @addOption="addOption"></insert-option>
      <delete-option @deleteOption="deleteOption"></delete-option>
    </div>
    <div class="action">
      <up @upmove="upmove"></up>
      <down @downmove="downmove"></down>
    </div>
  </div>
</div>
  
</template>

<script>
import InsertOption from './editbutton/InsertOption.vue'
import DeleteOption from './editbutton/DeleteOption.vue'
import Up from './editbutton/Up.vue'
import Down from './editbutton/Down.vue'
//TODO: here 2021.08.27 晚上信息  star
export default {
  name:'OptionDesign',
  components: {
    InsertOption,
    DeleteOption,
    Up,
    Down,
  },
  data() {
   return {
     optionAviNum: this.optavinum,
     isOptAviSet: this.isoptset,
   }
  },
  emits: ['addOption', 'deleteOption', 'changeDefault', 'changeDes', 'changeText', 'upmove', 'downmove'],
  methods: {
    addOption() {
      this.$emit('addOption')
    },
    deleteOption() {
      this.$emit('deleteOption')
    },
    changeDefault() {
      this.$emit('changeDefault', this.isDefault)
    },
    changeDes() {
      this.$emit('changeDes', {description: this.description, index: this.index})
    },
    changeText() {
      this.$emit('changeText', {text: this.text, index: this.index})
    },
    upmove() {
      this.$emit('upmove', this.index)
    },
    downmove() {
      this.$emit('downmove', this.index)
    },
    optNumChange() {
      console.log('1234');
      let data = {num: this.optionAviNum, index: this.index}
      this.$emit('optnumchange', data)
    },
    // 选择复选框改变
    optSetChange() {
      this.isOptAviSet = !this.isOptAviSet

      console.log(this.isOptAviSet);
      if(this.isOptAviSet === false) {
        this.optionAviNum = null
        this.optNumChange()
      }
      else if (this.isOptAviSet === true) {
        this.optionAviNum = 1
        this.optNumChange()
      }
    }
  },
  props: {
    text: {
      type: String,
      default: '',
    },
    description: {
      type: String,
      default: ''
    },
    isDefault: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: 0,
    },
    isoptset: {},
    optavinum: {},
  },
}
</script>

<style scoped src='assets/css/editcss/optionDesign.css'>
  /* @import url('../css/optionDesign.css'); */
</style>